{template common/contentheader}
<style type="text/css">
div.button {
	height: 25px;
	width: 100px;
	background-color: #000000;
	font-size: 14px;
	color: #ffffff;
	text-align: center;
	line-height: 20px;
}
div.button.hover {
	background-color: darkgray;
	color: #ffffff;
}
</style>
<div class="setcontent">
	<div class="settitle">
		<h3>{lang admin_operation_slide:admin}</h3>
	</div>
	<div class="alert alert-info mt10">
		<span class="label label-info">{lang info:admin}</span>
		{lang admin_operation_slide:admin}
	</div>
	<div class="setform">
		<table class="table table-striped">
        <thead>
          <tr>
            <th width="200">{lang admin_operation_slide_pic:admin}</th>
            <th width="200">{lang admin_operation_slide_title:admin}</th>
            <th width="200">{lang admin_operation_slide_desc:admin}</th>
            <th width="200">{lang admin_operation_slide_link:admin}</th>
            <th width="200">{lang th_displayorder:admin}</th>
            <th width="200">{lang operation:admin}</th>
          </tr> 
        </thead>
        <tbody>
        {loop $slides $key $sm}
			<tr>
			<td><a href="$sm['link_url']"><img src="{baseurl}$sm['image_url']" width="150" height="55"/></a></td>
			<td style="word-wrap:break-word;width: 100px;">$sm['title']</td>
			<td style="word-wrap:break-word;width: 200px;">$sm['desc']</td>
			<td><a href="$sm['link_url']" target="_blank">{lang link_url:admin}</a></td>
			<td>$sm['order']</td>
			<td><a href="{url admin/homeslide?act=delete&key=$sm['key']}">{lang delete:admin}</a> 
			<a href="{url admin/homeslide?act=edit&key=$sm['key']}">{lang edit:admin}</a></td>
          	</tr>
		{/loop}
        </tbody>
		</table>
	</div>
	<div class="settitle">
		<h3>{lang add_slide:admin}</h3>
	</div>
	<div class="setform">
		<form class="pzform" method="post" action="{url admin/homeslide?act=add}" id="addform">
			<div class="control-group">
		      <label class="control-label" for="input01"></label>
		      <div class="controls" id="imgview">
		      </div>
		    	<input type="hidden" id="filename" name="filename"/>
		   </div>
			<div class="formgroup">
				<label class="formlabel">{lang select_file:admin}:</label>
				<div class="formcontrol" id='fileupload_div'>
					<div id="button1" class="button">{lang upload_pic:admin}</div>
					<p class="help-block">590X300(px)</p>
				</div>
				<span class="formhelp">{lang select_file:admin}</span>
			</div>
			
			<div class="formgroup">
				<label class="formlabel">{lang th_title:admin}:</label>
				<div class="formcontrol">
					<input type="text" name="title" id="title"/>
				</div>
				<span class="formhelp">{lang th_title:admin}</span>
			</div>
			
			<div class="formgroup">
				<label class="formlabel">{lang link_url:admin}:</label>
				<div class="formcontrol">
					<input type="text" name="link_url" id="link_url"/>
				</div>
				<span class="formhelp">{lang link_url:admin}</span>
			</div>
			
			<div class="formgroup">
				<label class="formlabel">{lang th_displayorder:admin}:</label>
				<div class="formcontrol">
					<input type="text" name="order" id="order"/>
				</div>
				<span class="formhelp">{lang th_displayorder:admin}</span>
			</div>


			<div class="formgroup">
				<label class="formlabel">{lang image_desc:admin}:</label>
				<div class="formcontrol">
					<textarea id="desc" name="desc" rows="5"></textarea>
				</div>
				<span class="formhelp">{lang image_desc:admin}</span>
			</div>
			
			<div class="formbuttons">
				<button type="submit" class="btn btn-primary">{lang add:admin}</button>
			</div>
		</form>
	</div>
</div>
<script  type="text/javascript">
$(document).ready(function(){
	var button = $('#button1'), interval;
	
	new AjaxUpload(button, {
		action: '{url admin/homeslide?act=upload}', 
		name: 'qqfile',
		responseType: 'json',
		onSubmit : function(file, ext){
			// change button text, when user selects file			
			button.text('Uploading');
							
			// If you want to allow uploading only 1 file at time,
			// you can disable upload button
			this.disable();
			
			// Uploding -> Uploading. -> Uploading...
			interval = window.setInterval(function(){
				var text = button.text();
				if (text.length < 13){
					button.text(text + '.');					
				} else {
					button.text('Uploading');				
				}
			}, 200);
		},
		onComplete: function(file, result){
			button.text('{lang upload_pic:admin}');
						
			window.clearInterval(interval);
						
			// enable upload button
			this.enable();

			if(result.success === 0){
				alert(result.message);
				return;
			}
			var filename = result.data.filename+"."+result.data.ext;
			var filepath = "{baseurl}data/attachments/homeslide/"+filename;
			$('#imgview').html('<img src="'+filepath+'" height="200"/>');
			$('#filename').val(filename);
		}
	});
});
</script>
{template common/contentfooter}